<template>
  <div class="broadside-list-container">
    <span class="title">热门</span>
    <div
      v-for="videoItem in videoData"
      :key="videoItem.id"
      class="video-list-item"
      @click="toVideo(videoItem.id)"
    >
      <el-image :src="videoItem.image" class="img"></el-image>
      <div class="content">{{ videoItem.title }}</div>
    </div>
  </div>
</template>

<script>
import { getRandomVideo } from "../api/videoApi";
export default {
  props: {
    listSize: {
      type: Number,
      default: 4,
    },
  },
  data() {
    return {
      videoData: [],
    };
  },
  methods: {
    toVideo(id) {
      if (this.$route.query.id != id) {
        this.$router.push({
          name: "video",
          query: {
            id: id,
          },
        });
      }
    },
    getRandomVideo() {
      getRandomVideo(this.listSize)
        .then((res) => {
          this.videoData = res.data.data.rows;
        })
        .catch((error) => {
          console.log(error);
        });
    },
  },
  mounted() {
    this.getRandomVideo();
  },
};
</script>

<style lang="scss" scoped>
.broadside-list-container {
  width: 100%;
}

.video-list-item {
  width: 100%;
  height: 100px;
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  justify-content: space-between;
  margin: 10px 0 10px 0;
}

.img {
  width: 40%;
  height: 100%;
}

.content {
  width: 58%;
  height: 100px;
}

.title {
  font-size: 20px;
}
</style>
